<template>
  <BaseLayout class="menus" :class="{ active: baseStore.menuSwitch }">
    <div class="cell" v-for="(item, idx) in acticle" :key="idx">
      <div class="btn" @click="handlerClickBtnMenu(item)">
        {{ item.title }}
      </div>
    </div>
  </BaseLayout>
</template>
<script setup lang="ts">
import BaseLayout from '../layout/base.vue'
import { acticle } from '../data'
import { useBaseStore } from '../stores/base.ts'

const baseStore = useBaseStore()
/**
 * 菜单选中
 */
const handlerClickBtnMenu = (item: { title: string }) => {
  // 设置当前词库
  baseStore.currentLesson = (acticle as { [key: string]: any })[item.title]
  // 关闭菜单界面
  baseStore.menuSwitch = false
  // 关闭完成界面
  baseStore.flagComplete = false
}
</script>
<style lang="scss" scoped>
.menus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(100%);
  background-color: #fff;
  transition: 0.2s;
  z-index: 999;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: baseline;
  padding: 0.05rem;
  box-sizing: border-box;
  body.shade & {
    background-color: #000;
  }

  &.active {
    transform: translateX(0);
  }

  .cell {
    width: 33.3333%;
    padding: 0.05rem;
    box-sizing: border-box;
  }
}
</style>
